<template>
  <div>
    <h1>Vue 中的markdown转Html</h1>
    <a-textarea
      v-model:value="value"
      placeholder="Autosize height based on content lines"
      :auto-size="{ minRows: 5 }"
    />
    <a-button type="primary" @click="changeHtml">转化</a-button>
    <p>{{ markDown }}</p>
    <p v-html="markDown"></p>
    <h1>富文本编辑器</h1>
    <div :class="$style['border']">
      <v-md-editor v-model="testMmarkdown" height="400px"></v-md-editor>
    </div>
    <h1>预览 html 测试</h1>
    <div :class="$style['border']">
      <v-md-preview-html :html="htmlText" preview-class="vuepress-markdown-body" />
    </div>
    <h5>预览md</h5>
    <div :class="$style['border']" style="margin-bottom: 20px;">
      <v-md-preview :text="testMmarkdown"></v-md-preview>
    </div>
  </div>
</template>

<script setup lang="ts">
import MarkdownIt from 'markdown-it';
import testMmarkdown from './test-markdown.md?raw';
import { ref } from 'vue';

const md = new MarkdownIt();
const value = ref('');
const htmlText = ref('<h1>预览测111111试</h1>');
const markDown = ref('');
const changeHtml = () => {
  markDown.value = md.render(value.value);
};
</script>

<style lang="less" module>
.border {
  border: 1px solid var(--border);
  border-radius: 5px;
}
</style>
